<template>
  <div>
    <el-dialog
      title="服务部署配置"
      :visible.sync="showOneServiceDeployDialog"
      width="60%"
      center
      :destroy-on-close="true"
    >
      <div style="height: 50vh; overflow-y: scroll;">
        <div>
          <el-row>
            <el-col :span="8">
              <span>
                当前选择服务为: {{ appName }}
              </span>
            </el-col>
            <el-col :span="8">
              请选择需要部署的版本：
              <el-select v-model="appVersion"
                         size="mini"
                         style="width: 165px"
                         @focus="getAppInfoVersionList(appName)"
                         @change="getOneServiceDeployInfo()"
              >
                <!--                         :disabled="appVersion !== ''"-->
                <el-option
                  v-for="item in appInfoVersionList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>
        <div v-if="appVersion !== ''">
          <div>
            <div class="displayLayout">
              <el-row>
                <el-col :span="8">
                  <div>
                  <span>
                    服务标识：
                  </span>
                    <el-input
                      placeholder="请输入服务标识"
                      style="width: 250px;"
                      v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.appName"
                      disabled
                      size="mini"
                    >
                    </el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div>
                  <span>
                    服务版本：
                  </span>
                    <el-input
                      placeholder="请输入服务版本"
                      style="width: 250px;"
                      v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.version"
                      disabled
                      size="mini"
                    >
                    </el-input>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="displayLayout">
              <el-row>
                <el-col :span="8">
                  <div>
                  <span>
                    服务镜像：
                  </span>
                    <el-input
                      placeholder="请输入服务镜像"
                      style="width: 250px;"
                      v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.image"
                      disabled
                      size="mini"
                    >
                    </el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div>
                  <span>
                    服务描述：
                  </span>
                    <el-input
                      placeholder="请输入服务描述"
                      clearable
                      style="width: 250px;"
                      v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.description"
                      size="mini"
                    >
                    </el-input>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="displayLayout">
              <el-row>
                <el-col :span="8">
                  <div>
                  <span>
                    部署名称：
                  </span>
                    <el-input
                      placeholder="请输入部署名称"
                      clearable
                      style="width: 250px;"
                      v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.deployName"
                      @blur="checkDeployName"
                      size="mini"
                    >
                    </el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div>
                  <span>
                    副本数量：
                  </span>
                    <el-input-number
                      placeholder="请输入服本数量"
                      type="number"
                      style="width: 250px;"
                      v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.replicas"
                      :min="1"
                      :max="100"
                      :step="1"
                      size="mini"
                    >
                    </el-input-number>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div style="float: right; margin-top: 10px;">
            <el-switch
              v-model="expandSwitch"
              active-color="#13ce66"
              inactive-color="#eeeeee"
              active-text="展开"
              @change="expandAll"
            >
            </el-switch>
          </div>
          <div style="margin-top: 40px;">
            <div>
              <el-collapse v-model="activeName" :accordion="accordionType">
                <el-collapse-item title="端口设置" name="1">
                  <div v-for="(portInfo, index) in gvStoreYamlDeployVo.yamlDeployPortInfo" :key="portInfo.port"
                       style="margin-bottom: 5px;">
                    <el-row>
                      <el-col :span="3">
                      <span>
                        协议：
                      </span>
                        <el-input
                          :disabled="true"
                          style="width: 80px"
                          v-model="portInfo.protocol"
                          size="mini"
                        >
                        </el-input>
                      </el-col>
                      <el-col :span="4">
                      <span>
                        内部端口：
                      </span>
                        <el-input
                          style="width: 80px"
                          v-model="portInfo.port"
                          disabled
                          size="mini"
                        >
                        </el-input>
                      </el-col>
                      <el-col :span="6">
                      <span>
                        暴露端口：
                      </span>
                        <el-input
                          style="width: 80px"
                          v-show="!portInfo.fixed"
                          disabled
                          size="mini"
                          placeholder="随机端口"
                        >
                        </el-input>
                        <el-input
                          style="width: 80px"
                          v-model="portInfo.port"
                          v-show="portInfo.fixed"
                          disabled
                          size="mini"
                        >
                        </el-input>
                        <el-checkbox v-model="portInfo.fixed" style="margin-left: 10px;">
                        <span>
                          容器一致
                        </span>
                        </el-checkbox>
                      </el-col>
                      <el-col :span="3">
                        <el-switch
                          active-text="开启域名"
                          v-model="portInfo.enableDns"
                        >
                        </el-switch>
                      </el-col>
                      <el-col :span="4" v-show="portInfo.enableDns">
                      <span>
                        DNS：
                      </span>
                        <el-input
                          style="width: 120px"
                          v-model="portInfo.dns"
                          size="mini"
                        >
                        </el-input>
                      </el-col>
                    </el-row>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="资源配置" name="2">
                  <div>
                    <el-row>
                      <el-col :span="8">
                        <div style="margin-bottom: 5px;">
                        <span>
                          CPU预留：
                        </span>
                          <el-input
                            style="width: 250px"
                            v-model="gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuRequest"
                            controls-position="right"
                            :min="0.1"
                            :max="256"
                            :step="0.1"
                            type="number"
                            size="mini"
                            @blur="checkCpu"
                          >
                            <template v-slot:append>核</template>
                          </el-input>
                        </div>
                        <div v-show="gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit">
                        <span>
                          CPU限制：
                        </span>
                          <el-input
                            style="width: 250px;"
                            v-model="gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuLimit"
                            controls-position="right"
                            :min="0.1"
                            :max="256"
                            :step="0.1"
                            type="number"
                            size="mini"
                            @blur="checkCpu"
                          >
                            <template v-slot:append>核</template>
                          </el-input>
                        </div>
                        <div>
                          <span> CPU可用： </span>
                          <span>{{ remainResourceInfo.cpu }}核</span>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div style="margin-bottom: 5px;">
                        <span>
                          内存预留：
                        </span>
                          <el-input
                            style="width: 250px"
                            v-model="gvStoreYamlDeployVo.yamlDeployResourceInfo.memRequest"
                            controls-position="right"
                            :min="4"
                            :max="16384"
                            :step="256"
                            type="number"
                            size="mini"
                            @blur="checkMemory"
                          >
                            <template v-slot:append>MB</template>
                          </el-input>
                        </div>
                        <div v-show="gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit">
                        <span>
                          内存限制：
                        </span>
                          <el-input
                            style="width: 250px"
                            v-model="gvStoreYamlDeployVo.yamlDeployResourceInfo.memLimit"
                            controls-position="right"
                            :min="4"
                            :max="16384"
                            :step="256"
                            type="number"
                            size="mini"
                            @blur="checkMemory"
                          >
                            <template v-slot:append>MB</template>
                          </el-input>
                        </div>
                        <div>
                          <span> 内存可用： </span>
                          <span>{{ remainResourceInfo.memory }}MB</span>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <el-switch
                          v-model="gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit"
                          active-color="#13ce66"
                          inactive-color="#ff4949"
                          :active-text="resourceLimitText"
                          @change="changeResourceLimitStatus"
                        >
                        </el-switch>
                      </el-col>
                    </el-row>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="自动伸缩" name="3">
                  <!--                  <template slot="title">-->
                  <!--                    自动伸缩-->
                  <!--                    <el-switch-->
                  <!--                      v-model="gvStoreYamlDeployVo.enableHpa"-->
                  <!--                      active-color="#13ce66"-->
                  <!--                      inactive-color="#989898"-->
                  <!--                      style="margin-left: 20px;"-->
                  <!--                    >-->
                  <!--                    </el-switch>-->
                  <!--                  </template>-->
                  <div>
                    <el-switch
                      v-model="gvStoreYamlDeployVo.enableHpa"
                      active-color="#13ce66"
                      inactive-color="#989898"
                      :active-text="openHpaText"
                      @change="changeHpaStatus"
                    >
                    </el-switch>
                  </div>
                  <div v-if="gvStoreYamlDeployVo.enableHpa" style="margin-top: 4px;">
                    <el-row style="margin-bottom: 5px;">
                      <el-col :span="10">
                        <span class="spanStyle">
                            触发条件：
                        </span>
                        <el-select v-model="metricsInfo.type" placeholder="请选择"
                                   style="width: 100px; margin-right: 10px;"
                                   size="mini"
                        >
                          <el-option
                            v-for="selectMetrics in selectMetricsList"
                            :key="selectMetrics.value"
                            :label="selectMetrics.label"
                            :value="selectMetrics.value"
                          >
                          </el-option>
                        </el-select>
                        <span class="spanStyle">
                          使用量：
                        </span>
                        <el-input-number
                          style="width: 100px;"
                          v-model="metricsInfo.usage"
                          controls-position="right"
                          :min="1"
                          :max="99"
                          :step="1"
                          size="mini"
                        >
                        </el-input-number>
                        %
                        <el-button type="primary" size="mini" icon="el-icon-plus" circle
                                   style="margin-left: 10px;" @click="addHapInfoMetrics"
                                   class="el-button-primary-style"
                        ></el-button>
                      </el-col>
                      <el-col :span="6" v-for="(mt,index) in gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics"
                              :key="mt.type">
                      <span class="spanStyle">
                        类型：{{ mt.type }} - 值：{{ mt.usage }} %
                        <el-button type="primary" size="mini" icon="el-icon-delete" circle
                                   style="margin-left: 10px;" @click="deleteMetrics(index)"
                                   class="el-button-primary-style"
                        ></el-button>
                      </span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                      <span class="spanStyle">
                        伸缩范围：
                      </span>
                        <el-input-number
                          style="width: 100px;"
                          v-model="gvStoreYamlDeployVo.yamlDeployHpaInfo.minReplicas"
                          controls-position="right"
                          :min="1"
                          :max="99"
                          :step="1"
                          size="mini"
                          @blur="checkReplicas"
                        >
                        </el-input-number>
                        ～
                        <el-input-number
                          style="width: 100px;"
                          v-model="gvStoreYamlDeployVo.yamlDeployHpaInfo.maxReplicas"
                          controls-position="right"
                          :min="1"
                          :max="99"
                          :step="1"
                          size="mini"
                          @blur="checkReplicas"
                        >
                        </el-input-number>
                        <span style="margin-left: 10px;">注：1-99之间</span>
                      </el-col>
                    </el-row>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="配置挂载" name="4"
                                  v-if="gvStoreYamlDeployVo.yamlDeployConfigInfo.length !== 0">
                  <div v-for="(deployConfigInfo, index) in gvStoreYamlDeployVo.yamlDeployConfigInfo" :key="index"
                       style="margin-bottom: 5px;">
                    <el-row>
                      <el-col :span="6">
                      <span>
                          文件名称：
                        </span>
                        <el-input
                          style="width: 150px;"
                          v-model="deployConfigInfo.mountFilename"
                          size="mini"
                          disabled
                        >
                        </el-input>
                      </el-col>
                      <el-col :span="11">
                      <span>
                          挂载路径：
                        </span>
                        <el-input
                          style="width: 350px;"
                          v-model="deployConfigInfo.mountPath"
                          disabled
                          size="mini"
                        >
                        </el-input>
                      </el-col>
                      <el-col :span="3">
                        <el-button
                          type="primary" size="mini"
                          @click="getFileDataById(gvStoreYamlDeployVo.yamlDeployBaseInfo.appId,
                                 deployConfigInfo.mountPath, deployConfigInfo.mountFiledata)"
                          class="el-button-primary-style"
                        >
                          编 辑
                        </el-button>
                      </el-col>
                    </el-row>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="存储挂载" name="5"
                                  v-if="gvStoreYamlDeployVo.yamlDeployVolumeInfo.length !== 0">
                  <div v-for="(deployVolumeInfo, index) in gvStoreYamlDeployVo.yamlDeployVolumeInfo" :key="index"
                       style="margin-bottom: 5px;">
                    <el-row>
                      <el-col :span="3">
                        <el-switch
                          v-model="deployVolumeInfo.autoCreate"
                          active-color="#13ce66"
                          inactive-color="#989898"
                          :active-text="deployVolumeInfo.autoCreate ? '自动创建': '选择已有'"
                        >
                        </el-switch>
                      </el-col>
                      <el-col :span="8">
                        <span>
                          挂载路径：
                        </span>
                        <el-input
                          style="width: 250px;"
                          v-model="deployVolumeInfo.mountPath"
                          size="mini"
                        >
                        </el-input>
                      </el-col>
                      <el-col :span="6" v-show="deployVolumeInfo.autoCreate">
                      <span>
                        挂载模式：
                      </span>
                        <el-select v-model="deployVolumeInfo.accessMode" placeholder="请选择挂载模式" size="mini">
                          <el-option
                            v-for="item in volumeAccessMode"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="6" v-show="!deployVolumeInfo.autoCreate">
                      <span>
                        已有挂载：
                      </span>
                        <el-select v-model="deployVolumeInfo.pvcId" placeholder="请选择已存在的挂载卷" size="mini">
                          <el-option
                            v-for="item in existPvcList"
                            :key="item.id"
                            :label="item.pvcName"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="6" v-show="deployVolumeInfo.autoCreate">
                      <span>
                          挂载容量：
                        </span>
                        <el-input
                          style="width: 140px;"
                          v-model="deployVolumeInfo.capacity"
                          controls-position="right"
                          :min="0"
                          :max="1024"
                          :step="1"
                          type="number"
                          size="mini"
                        >
                          <template v-slot:append>GB</template>
                        </el-input>
                      </el-col>
                    </el-row>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="环境变量" name="6">
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <div style="margin-bottom: 5px;">
                        KEY
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div style="margin-bottom: 5px;">
                        VALUE
                      </div>
                    </el-col>
                    <el-col :span="11">
                      <div style="float: right">
                        <el-button type="primary" round size="mini" @click="addNewEnv"
                                   class="el-button-primary-style"
                        >
                          <i class="el-icon-plus"></i>新增
                        </el-button>
                      </div>
                    </el-col>
                  </el-row>
                  <div v-for="(envInfo, index) in gvStoreYamlDeployVo.yamlDeployEnvInfo" :key="index">
                    <el-row :gutter="20">
                      <el-col :span="6">
                        <div style="margin-bottom: 5px;">
                          <el-input
                            v-model="envInfo.key"
                            :disabled="index < gvEnvLength"
                            size="mini"
                          >
                          </el-input>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div style="margin-bottom: 5px;">
                          <el-input
                            v-model="envInfo.value"
                            size="mini"
                          >
                          </el-input>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveServiceDeployInfo"
                   class="el-button-primary-style"
        >保 存</el-button>
        <el-button @click="closeServiceConfigDialog">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="查看并编辑配置文件"
      :visible.sync="editConfigFileDialog"
      width="60%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <div>
        <el-input type="textarea" v-model="configFileContext" :rows="24"></el-input>
      </div>
      <div class="deployButtonDiv">
        <el-button type="primary" size="small" @click="saveConfigFileContext"
                   class="el-button-primary-style"
        >保 存
        </el-button>
        <el-button type="primary" size="small" @click="closeEditConfigFileDialog"
                   class="el-button-primary-style"
        >取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "ServiceGroupDeployOneServiceDialog",
    props: [
      "appName"
    ],
    data() {
      return {
        showOneServiceDeployDialog: false,
        appInfoVersionList: [],
        appVersion: "",
        openHpaText: "关闭自动伸缩",
        gvStoreYamlDeployVo: {
          yamlDeployBaseInfo: {
            appName: "",
            deployName: "",
            version: "",
            image: "",
            description: "",
            replicas: 1
          },
          yamlDeployPortInfo: [],
          yamlDeployResourceInfo: {
            cpuRequest: 0,
            memRequest: 0,
            cpuLimit: 0,
            memLimit: 0
          },
          enableHpa: false,
          yamlDeployHpaInfo: {
            maxReplicas: 10,
            minReplicas: 0,
            metrics: [],
          },
          yamlDeployConfigInfo: [],
          yamlDeployVolumeInfo: [],
          yamlDeployEnvInfo: [],
          livenessInfoOffline: {
            // 冒烟测试类型 url,file,program
            type: "",
            port: 0,
            portType: "",
            url: "",
            command: [],
            initialDelaySeconds: 0,
            periodSeconds: 0,
            timeoutSeconds: 0,
            persistentConnection: false,
            successThreshold: 0,
            failureThreshold: 0,
          },
          readinessInfoOffline: {
            // 冒烟测试类型 url,file,program
            type: "",
            port: 0,
            portType: "",
            url: "",
            command: [],
            initialDelaySeconds: 0,
            periodSeconds: 0,
            timeoutSeconds: 0,
            persistentConnection: false,
            successThreshold: 0,
            failureThreshold: 0,
          },
        },
        metricsInfo: {
          type: "",
          usage: 0
        },
        deleteMetrics: [
          {
            value: "cpu",
            label: "CPU"
          },
          {
            value: "memory",
            label: "内存"
          }
        ],
        gvEnvLength: 0,
        expandSwitch: false,
        activeName: "0",
        accordionType: true,
        resourceLimitText: "开启资源限制",
        editConfigFileDialog: false,
        configFileContext: "",
        existPvcList: [],
        volumeAccessMode: [
          "ReadWriteOnce",
          "ReadOnlyMany",
          "ReadWriteMany"
        ],
        mountPath: "",
        remainResourceInfo: {
          cpu: 0,
          memory: 0,
        }
      }
    },
    methods: {
      changeHpaStatus(status) {
        if (status) {
          this.openHpaText = "开启自动伸缩";
        } else {
          this.openHpaText = "关闭自动伸缩";
        }
      },
      expandAll() {
        if (this.expandSwitch) {
          this.accordionType = false;
          this.activeName = ['1', '2', '3', '4', '5', '6'];
        } else {
          this.accordionType = true;
          this.activeName = "0";
        }
      },
      checkCpu() {
        if (
          this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuRequest >
          this.remainResourceInfo.cpu
        ) {
          this.$message.error("CPU资源值不能超过可用资源");
          return;
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuLimit >
            this.remainResourceInfo.cpu
          ) {
            this.$message.error("CPU资源值不能超过可用资源");
          }
        }
      },
      checkMemory() {
        if (
          this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memRequest >
          this.remainResourceInfo.memory
        ) {
          this.$message.error("内存资源值不能超过可用资源");
          return;
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memLimit >
            this.remainResourceInfo.memory
          ) {
            this.$message.error("CPU资源值不能超过可用资源");
          }
        }
      },
      getAppInfoVersionList(appName) {
        this.$appStoreApi.appNameVersionList(appName).then(res => {
          if (res && res.code === 200) {
            this.appInfoVersionList = res.data;
          }
        })
      },
      getOneServiceDeployInfo() {
        this.$appStoreApi.getDeployConfig({appName: this.appName, appVersion: this.appVersion}).then(res => {
          if (res && res.code === 200) {
            this.gvStoreYamlDeployVo = res.data;
            this.gvEnvLength = res.data.yamlDeployEnvInfo.length;
            if (this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics === null) {
              this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics = [];
            }
          }
        })
      },
      checkDeployName() {
        if (this.gvStoreYamlDeployVo.yamlDeployBaseInfo.deployName === "") {
          this.$message.error("部署名称不能为空，请修改...");
          return;
        }
        this.$appManageApi.checkDeployName(this.gvStoreYamlDeployVo.yamlDeployBaseInfo.deployName).then(res => {
          if (res && res.code === 200) {
            if (res.data) {
              this.$message.error("部署名称已存在，请修改...");
            }
          }
        });
      },
      changeResourceLimitStatus(status) {
        if (status) {
          this.resourceLimitText = "开启资源限制";
        } else {
          this.resourceLimitText = "关闭资源限制";
        }
      },
      getFileDataById(id, mountFilePath, mountFiledata) {
        this.editConfigFileDialog = true;
        if (mountFiledata === "") {
          this.$appStoreApi.getFileData({id: id, mountFilepath: mountFilePath}).then(res => {
            if (res && res.code === 200) {
              this.configFileContext = res.data;
              this.mountPath = mountFilePath;
            }
          })
        } else {
          this.configFileContext = mountFiledata;
        }
      },
      addNewEnv() {
        let filter = this.gvStoreYamlDeployVo.yamlDeployEnvInfo.filter(ele => ele.value === '' || ele.key === '');
        if (filter.length > 0) {
          this.$message.warning("请先将空数据填写完整");
        } else {
          this.gvStoreYamlDeployVo.yamlDeployEnvInfo.push({
            key: "",
            value: ""
          })
        }
      },
      saveConfigFileContext() {
        this.gvStoreYamlDeployVo.yamlDeployConfigInfo.forEach(ele => {
          if (ele.mountPath === this.mountPath) {
            ele.mountFiledata = this.configFileContext;
          }
        })
        this.editConfigFileDialog = false;
      },
      closeEditConfigFileDialog() {
        this.editConfigFileDialog = false;
      },
      getExistPvcList() {
        this.$storagePvcApi.listAllPvc().then(res => {
          if (res && res.code === 200) {
            this.existPvcList = res.data;
          }
        })
      },
      checkReplicas() {
        if (this.gvStoreYamlDeployVo.yamlDeployHpaInfo.maxReplicas <= this.gvStoreYamlDeployVo.yamlDeployHpaInfo.minReplicas) {
          this.$message.error("伸缩范围最小值应小于最大值");
          return false;
        }
        return true;
      },
      saveServiceDeployInfo() {
        if (this.appVersion === "") {
          this.$message.warning("请先选择该服务需要进行部署的版本...")
          return;
        }
        if (
          this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuRequest >
          this.remainResourceInfo.cpu
        ) {
          this.$message.error("CPU资源值不能超过可用资源");
          return;
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuLimit >
            this.remainResourceInfo.cpu
          ) {
            this.$message.error("CPU资源值不能超过可用资源");
            return;
          }
        }
        if (this.gvStoreYamlDeployVo.enableHpa) {
          if (this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics.length === 0) {
            this.$message.error("自动伸缩开启后，必须添加触发条件");
            return;
          }
          if (!this.checkReplicas()) {
            return;
          }
        }
        if (
          this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memRequest >
          this.remainResourceInfo.memory
        ) {
          this.$message.error("内存资源值不能超过可用资源");
          return;
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memLimit >
            this.remainResourceInfo.memory
          ) {
            this.$message.error("内存资源值不能超过可用资源");
            return;
          }
        }
        this.$emit("addServiceGroupOneServiceToGvStoreGroupDeployVo", this.gvStoreYamlDeployVo);
        // this.closeServiceConfigDialog();
      },
      closeServiceConfigDialog() {
        this.appVersion = "";
        this.gvStoreYamlDeployVo = {
          yamlDeployBaseInfo: {
            appName: "",
            deployName: "",
            version: "",
            image: "",
            description: "",
            replicas: 1
          },
          yamlDeployPortInfo: [],
          yamlDeployResourceInfo: {
            cpuRequest: 0,
            memRequest: 0,
            cpuLimit: 0,
            memLimit: 0
          },
          enableHpa: false,
          yamlDeployHpaInfo: {
            maxReplicas: 10,
            minReplicas: 0,
            metrics: [],
          },
          yamlDeployConfigInfo: [],
          yamlDeployVolumeInfo: [],
          yamlDeployEnvInfo: []
        };
        this.showOneServiceDeployDialog = false;
      },
      addHapInfoMetrics() {
        if (this.metricsInfo.type === "" || this.metricsInfo.usage === 0) {
          this.$message.warning("请先选择数据，并确保使用量不为0")
          return;
        }
        const existingIndex = this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics.findIndex(item => item.type === this.metricsInfo.type);
        if (existingIndex !== -1) {
          // 如果已存在相同的 key，则更新对应的 value
          this.$set(this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics, existingIndex, {...this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics[existingIndex], ...this.metricsInfo});
        } else {
          // 如果不存在相同的 key，则添加新的数据
          this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics.push({...this.metricsInfo});
        }
        this.metricsInfo = {
          type: "",
          usage: 0,
        }
      },
      deleteMetrics(index) {
        this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics.splice(index, 1);
      },
      getMaxResourceInfo() {
        this.$tenantManageApi.getMaxResources().then(res => {
          if (res && res.code === 200) {
            this.remainResourceInfo = res.data;
          }
        })
      },
    },
    mounted() {
      this.getExistPvcList();
    },

    beforeMount() {
      this.getMaxResourceInfo();
    }
  }
</script>

<style scoped>

</style>
